<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="/xuni/bundle.js"></script>

<body>
    <div id="main"></div>
</body>
<script>
    var temp = ` <ul>
        <h1>              我{{a.b}}</h1>
        {{#foods}}
        <li>
            {{.}}
        </li>
        {{/foods}}
        {{#arr}}
        <li>
            <div class="hd">{{name}}的信息</div>
            <div class="bd">
                <p>姓名：{{name}}</p>
                <p>性别：{{sex}}</p>
                <p>年龄：{{age}}</p>
            </div>
        </li>
        {{/arr}}
    </ul>`;
    var data = {
        foods: ['苹果', '桃子', '香蕉'],
        arr: [{
                "name": "小明",
                "age": 12,
                "sex": "男"
            },
            {
                "name": "小话",
                "age": 16,
                "sex": "女"
            },
            {
                "name": "小米",
                "age": 22,
                "sex": "男"
            },
        ],
        a: {
            b: 100
        }
    };
    let domStr = Template.render(temp, data)
    var main = document.getElementById('main');
    main.innerHTML = domStr
</script>

</html>